<template>
  <div v-if="diversionFlights.length > 0">
    <div class="card-title-wrapper">
      <span class="title-text"
        >±6H内改航航班（{{ diversionFlights.length }}）</span
      >
      <el-button @click="handleLoad" icon="Refresh" circle link></el-button>
      <!-- <span>
        <el-button @click="handleJump" icon="Search" link></el-button>
      </span> -->
    </div>
    <div
      :class="[
        'wrapper',
        'card-wrapper-normal',
        darkMode ? 'card-wrapper-dark' : 'card-wrapper-light',
        diversionFlights.length == 0 ? 'wrapper-empty' : '',
      ]"
    >
      <el-row :gutter="48" v-if="diversionFlights.length > 0">
        <el-col :sm="24" :md="12">
          <div class="subtitle-wrapper">
            <el-text type="primary" size="small"
              >已批复（{{ diversionFlightsApproved.length }}）</el-text
            >
          </div>
          <DiversionTable :data="diversionFlightsApproved" />
        </el-col>
        <el-col :sm="24" :md="12">
          <div class="subtitle-wrapper">
            <el-text type="info" size="small"
              >未批复（{{ diversionFlightsNotApprovedYet.length }}）</el-text
            >
          </div>

          <DiversionTable :data="diversionFlightsNotApprovedYet" />
        </el-col>
      </el-row>
      <el-empty v-else :image-size="100" description="无改航航班" />
      <!-- <el-text v-else type="info" size="small">无改航航班</el-text> -->
      <!--   -->
      <!-- <div v-else class="subtitle-wrapper">
        <el-text type="info" size="small">无改航航班</el-text>
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import dayjs from "dayjs";

import useCommonStore from "@/store/common";
import useAvtivityStore from "@/store/activity";

// import { useRoute, useRouter } from "vue-router";

import DiversionTable from "./DiversionTable.vue";

const commonStore = useCommonStore();
const activityStore = useAvtivityStore();

// const route = useRoute();
// const router = useRouter();

const darkMode = computed(() => commonStore.darkMode);

const diversionFlights = computed(() =>
  activityStore.currentDiversion.map((cell) => {
    cell["gate"] = getGatePoint(cell.route);
    cell["gate2"] = getGatePoint(cell.route2);
    let etdDiff = dayjs().diff(cell.etd, "day");
    let etaDiff = dayjs().diff(cell.eta, "day");
    cell["etdStr"] =
      (etdDiff > 0 ? "明" : etdDiff < 0 ? "昨" : "今") +
      " " +
      dayjs(cell.etd).format("HH:mm");
    cell["etaStr"] =
      (etaDiff > 0 ? "明" : etaDiff < 0 ? "昨" : "今") +
      " " +
      dayjs(cell.eta).format("HH:mm");
    return cell;
  })
);

const diversionFlightsApproved = computed(() =>
  diversionFlights.value.filter((cell) => cell.status > 0)
);

const diversionFlightsNotApprovedYet = computed(() =>
  diversionFlights.value.filter((cell) => cell.status == 0)
);

const getGatePoint = (route) => {
  let gate = route.split(" ")[0];
  if (gate.length > 5) {
    gate = gate.substring(0, 4);
  }
  return gate;
};

const handleLoad = () => {
  activityStore.loadCurrentDiversion();
};

// const handleJump = () => {
//   router.push("/activity/Diversion");
// };
</script>

<style scoped>
.wrapper {
  display: inline-block;
  padding: 6px;
  height: 260px;
  /* width: calc(50% - 24px); */
  width: 100%;
  margin-bottom: 24px;
}

.wrapper-empty-disposed {
  height: 100px;
}

.task-name {
  font-size: 18px;
  font-weight: bold;
  /* font-family: "YaHei Consolas Hybrid" */
}

.subtitle-wrapper {
  padding: 4px;
  text-align: center;
  border-bottom: 1px dashed var(--el-color-info-light-5);
}
</style>
